<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-bom操作</title>
</head>
<body>
    <!-- 打开新窗口的按钮 -->
    <!-- <button onclick="open_()">打开新窗口</button> -->

    <!-- 关闭当前窗口的按钮 -->
    <!-- <button onclick="close_()">关闭当前窗口</button> -->

    <!-- 前进按钮 -->
    <!-- <button onclick="goForword()">前进</button> -->

    <!-- 后退按钮 -->
    <!-- <button onclick="goBack()">后退</button> -->

    <!-- go 方法按钮 -->
    <!-- <button onclick="fn()">go跳转</button> -->
    <script>
        /*
            BOM：浏览器对象模型，它是 js 和浏览器之间的一道桥梁，可以让 js 很好的控制浏览器
            window 对象的含义：
                            1. 一层是作为打开的浏览器的看待的（应用程序）
                            2. js 顶层对象，全局性的属性、方法都绑定在了 window 对象的身上，比如 alert()、open()、close()...

            window对象的属性与方法：
                    对象访问对象的属性和方法的方式：
                                                对象名.属性名
                                                对象名.方法名()

                    属性：
                        innerheight：浏览器窗口高度
                        innerwidth：浏览器窗口的宽度
                        单位都是像素（px）

                    方法：
                        open(新窗口的网址，打开方式，窗口的尺寸)：打开一个新的窗口
                        第一个参数时必填项，参数二、参数三是选填

                        close()：关闭当前窗口
        */ 

        // 控制台打印当前浏览器的窗口的宽度、高度
        // console.log('当前浏览器窗口的宽度是：' + window.innerWidth);
        // console.log('当前浏览器窗口的高度是：' + window.innerHeight);

        /*
            我们自定义 open() 和 close() 是属于顶层的 window 对象，而顶层的 window 对象中，已经包含有 open() 和 close() 两个方法
            如果不加以区分，浏览器会不知道你要执行哪一个方法
        */ 
        // 定义打开新窗口的方法
        // function open_(){
        //     // 调用 window 对象中 open() 方法，打开新窗口
        //     window.open('https://www.baidu.com','_blank','width=400,height=400');
        // }

        // 定义关闭当前窗口的方法
        // function close_(){
        //     // 调用 window 对象中 close() 方法，关闭当前窗口
        //     window.close();
        // }

        // console.log(window);


        /*
            Screen:

            属性：
                screen.width　　　　 属性返回以像素计的访问者屏幕宽度
                screen.height　　　　属性返回以像素计的访问者屏幕的高度。
                screen.availWidth　  属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征
                screen.availHeight　
        */ 

        // 打印屏幕的宽度、高度
        // console.log('当前屏幕的宽度是：' + screen.width);
        // console.log('当前屏幕的高度是：' + screen.height);

        // 打印屏幕除去所有界面特征之后的宽度、高度
        // console.log(screen.availWidth);
        // console.log(screen.availHeight);

        /*
            窗口的宽度、高度是会发生变化的，随着浏览器窗口的变化而变化 --- 应用程序的窗口
            屏幕的宽度、高度是不会发生改变的 --- 指的是物理的宽度、高度
        */ 


        /*
            navigator:返回的是用户所使用的的浏览器的相关信息
            属性：
                appName 属性返回浏览器的应用程序名称
                appCodeName 属性返回浏览器的应用程序代码名称
                appVersion 属性返回有关浏览器的版本信息
                platform：属性返回当前访问设备的操作平台
                userAgent 属性返回由浏览器发送到服务器的用户代理报头
                          1. 可以返回当前访问设备的信息
                          2. 可以返回当前访问设备的操作系统（ios、Android、Linux）
        */ 

        // 打印浏览器的应用程序名称
        // console.log(navigator.appName);

        // 打印浏览器的应用程序代码名称
        // console.log(navigator.appCodeName);

        // 打印浏览器的版本信息
        // console.log(navigator.appVersion);

        // 打印浏览器发送到服务器的用户代理报头
        // console.log(navigator.userAgent);

        // 打印当前访问设备的平台
        // console.log(navigator.platform);

        // 打印用户代理语言
        // zh-CN --- 中文
        // console.log(navigator.language);

        /*
            history对象：控制浏览器前进或者后退主要是针对同一个窗口的浏览器浏览记录
            注意事项：
                    history 对象中前进和后退的方法。都是针对同一个窗口下的浏览记录进行的前进与后退，一旦换成其他窗口，则不生效
            方法：
                forward()：前进
                back()：后退
                go(param)：跳页，通过参数，指定需要跳转到的浏览记录
                           param 参数表示需要跳转到的浏览记录
                                 参数为负数，向前跳转
                                 参数为正数，向后跳转
                                 
        */ 

        // 定义函数表示前进一页
        // function goForword(){
        //     // 调用 history 对象中的 forword() 方法
        //     history.forward();
        // }

        // // 定义函数表示后退一页
        // function goBack(){
        //     // 调用 history 对象中的 forword() 方法
        //     history.back();
        // }

        // // 定义函数表示跳转多页
        // function fn(){
        //     // 使用 go() 方法实现跳页
        //     history.go(-1);
        // }

        /*
            location：用于获取和设置当前页面地址（URL）信息。
            href：用于展示路径
            场景：用来判断登录之后页面跳转过程
        */ 

        // 打印 location 对象
        // console.log(location)

        // 路径信息
        // console.log(location.href)

        /*
            用户输入一个账户，自定义一个正确的账户，然后让两个账户作比较，如果一致，则跳转到 淘宝首页 不一致，alert提示
        */ 

        // var user = prompt('请输入账户');
        // var name = 'admin';
        // if(user == name){
        //     // 使用 location 对象中的 href 属性进行跳转
        //     location.href = 'https://www.taobao.com';
        // }else{
        //     confirm('错啦');
        // }

        /*
            window 对象下边的三个弹框方法

            1. alert() --- 一般是警告框
            2. confirm() --- 确认框
            3. prompt() --- 输入框
        */ 


    </script>
</body>
</html>